<template>
	<view class="tab-container">
		<view :class="index==2?'midTab-item':''" class="tab-item" v-for="(item,index) in tabList" :key="index" @tap="onClick(index)">
			<view class="shadow-hide" v-if="index==2"></view>
			<view class="white-round"></view>
			<image v-if="index!=2" class="animated fadeIn faster" :src="tabIndex==index?item.selectedIconPath:item.iconPath" mode=""></image>
			<view v-else class="midTab-img animated fadeIn faster" @tap.stop="midClick">
				<view>洗涤</view>
			</view>
			<text v-if="index!=2">{{item.text}}</text>
		</view>
	</view>
</template>

<script setup>
	import {ref, watch,getCurrentInstance} from "vue";
	let props = defineProps({
		i: {
			type: Number
		}
	})
  const { proxy } = getCurrentInstance()
//-----------------------------------data-----------------
	var tabIndex = ref(0)
	let tabList = ref( [{
		iconPath: 'http://www.xvopen.com/xiaoV/img1/tab11.png',
		selectedIconPath: 'http://www.xvopen.com/xiaoV/img1/tab1.png',
		text: "首页"
	},
	{
		iconPath: 'http://www.xvopen.com/xiaoV/img1/tab22.png',
		selectedIconPath: 'http://www.xvopen.com/xiaoV/img1/tab2.png',
		text: "商城"
	},
	{
		iconPath: 'http://www.xvopen.com/xiaoV/img1/tab-mid.png',
		selectedIconPath: 'http://www.xvopen.com/xiaoV/img1/tab-mid.png',
	},
	{
		iconPath: 'http://www.xvopen.com/xiaoV/img1/tab33.png',
		selectedIconPath: 'http://www.xvopen.com/xiaoV/img1/tab3.png',
		text: "订单"
	},
	{
		iconPath: 'http://www.xvopen.com/xiaoV/img1/tab44.png',
		selectedIconPath: 'http://www.xvopen.com/xiaoV/img1/tab4.png',
		text: "我的"
	}
])

//-----------------------------------watch----------------

	watch(() => props.i,(newVal,oldVal) => {
	  tabIndex.value = newVal
	},{immediate:true})

//---------------------------------function---------------
const emits = defineEmits(['click','midClick'])

	function onClick(index){
    proxy.$checkLoginAndExecute(() => {
      tabIndex.value = index
      emits('click',index)
    })
	}
	function midClick(){
		emits('midClick')
	}

</script>

<style scoped lang="scss">
.tab-container{
	width: 750rpx;
	height: 168rpx;
	font-size: 22rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 99;
	background-color: #fff;
	display: flex;
	justify-content: space-between;
	padding: 0 40rpx;
	box-shadow: 0 0 10rpx 5rpx rgba(0, 0, 0, 0.1);
	.tab-item{
		width: 100rpx;
		// background-color: red;
		display: flex;
		flex-direction: column;
		align-items: center;
		image{
			width: 40rpx;
			height: 40rpx;
			margin: 20rpx 0 3rpx
		}
	}
	.midTab-item{
		position: relative;
		width: 96rpx;
		// background-color: red;
		.shadow-hide{
			position: absolute;
			top: 0;
			left: -18rpx;
			width: 140rpx;
			height: 140rpx;
			background-color: #fff;
			z-index: 2;
		}
		.white-round{
			position: absolute;
			top: -20rpx;
			left: -8rpx;
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			background-color: #fff;
			// background-color: red;
			box-shadow: 0 0 10rpx 5rpx rgba(0, 0, 0, 0.1);
			z-index: 1;
		}
		.midTab-img{
			position: absolute;
			top: -10rpx;
			left: 1rpx;
			width: 106rpx;
			height: 106rpx;
			line-height: 86rpx;
			text-align: center;
			z-index: 3;
			background-color: #98DDFE;
			box-shadow: 0 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.16);
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50%;
			view{
				width: 90rpx;
				height: 90rpx;
				font-size: 24rpx;
				color: #fff;
				background-color: #00CBFF;
				background-image: linear-gradient(90deg, #00CBFF 0%, #0080FF 100%);
				border-radius: 50%;
			}
		}
	}
}
.bg{
	background-color: red;
}
</style>
